<template>
  <div id="shop" class="full-page">
    <!-- 商品基本信息 -->
    <div class="wrapper">
      <van-cell-group>
        <van-cell icon="shop-o" :title="shop_name" size="large">
          <div slot="label">
            <div style="padding: 5px 0;">{{ info }}</div>
            <div class="van-hairline--top"></div>
            <div style="padding: 5px 0; color:black;">
              联系电话 : {{ phone }}
            </div>
            <div style="padding: 5px 0 0 0; color:black;">
              地址 : {{ address }}
            </div>
          </div>
        </van-cell>
      </van-cell-group>

      <div v-show="Editable" style="padding:10px;">
        <van-button size="large" plain type="primary" @click="onEditItemClick"
          >添加商品</van-button
        >
      </div>

      <van-search
        v-model="searchInfo"
        placeholder="请输入搜索关键词"
        shape="round"
        @search="onSearch"
      >
      </van-search>
      <!--商品列表区-->
      <itemGrid :items="items" />

      <div class="push" />
    </div>

    <div class="footer">
      <van-pagination
        v-model="group_index"
        :total-items="total"
        :show-page-size="3"
        :items-per-page="6"
        force-ellipses
        @change="groupIndexChange"
      />
    </div>
  </div>
</template>

<script>
import {
  Tab,
  Tabs,
  Toast,
  Search,
  Button,
  Cell,
  CellGroup,
  pagination
} from "vant"
import { axios, API_URL } from "../../api"
import itemGrid from "../../components/common/itemGrid"
export default {
  components: {
    itemGrid,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Search.name]: Search,
    [Button.name]: Button,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [pagination.name]: pagination
  },
  methods: {
    onClick(name, title) {
      Toast(title)
    },
    onEditItemClick() {
      this.$router.push({
        name: "edititem",
        params: { editType: "addNew" }
      })
    },
    onSearch() {
      this.$router.push({
        name: "searchResult",
        query: {
          item_name: this.searchInfo,
          shop_id: this.shop_id
        }
      })
    },
    search(shop_id, group_index) {
      /* 清空数组 */
      this.items = []
      /* 获取商品的id列表 */
      axios
        .get(API_URL + "item/search", {
          params: {
            shop_id: shop_id,
            rank_type: 5,
            group_index: group_index
          }
        })
        .then(response => {
          this.item_ids = response.data.item_ids
          this.total = response.data.total
          /* 根据item_id获得商品信息 */
          this.item_ids.forEach(item_id => {
            let newItem = { item_id: item_id }
            this.items.push(newItem)
            axios
              .get(API_URL + "items/" + item_id, {})
              .then(response => {
                let item = newItem
                item.name = response.data.name
                item.current_price = response.data.current_price
                item.original_price = response.data.original_price
                item.in_stock = response.data.in_stock
                item.info = response.data.info
                item.sales = response.data.sales
                item.shop_id = response.data.shop_id
                item.images = response.data.images
                // 强制刷新
                this.items = this.items.splice(0)
              })
              .catch(err => {
                console.error(err)
              })
          })
        })
        .catch(err => {
          console.error(err)
        })
    },
    groupIndexChange() {
      this.search(this.shop_id, this.group_index - 1)
    }
  },
  data() {
    return {
      items: [],
      Editable: false,
      searchInfo: "",
      shop_name: "",
      address: "",
      info: "",
      phone: "",
      created_time: "",
      group_index: 1,
      total: 0
    }
  },
  mounted: function() {
    /* 预载商品页面信息 */
    this.shop_id = this.$route.params.shop_id
    axios
      .get(API_URL + "shops/" + this.shop_id)
      .then(response => {
        this.shop_name = response.data.name
        this.address = response.data.address
        this.info = response.data.info
        this.phone = response.data.phone
        this.created_time = response.data.created_time
      })
      .catch(err => {
        console.error(err)
      })

    this.groupIndexChange()
    /* 根据是否登录商店判断商店的可编辑选项 */
    if (this.$store.state.shop_token) {
      axios
        .get(API_URL + "shop", {
          headers: {
            authorization: this.$store.state.shop_token
          }
        })
        .then(response => {
          if (this.shop_id == response.data.shop_id) {
            this.Editable = true
          }
        })
        .catch(err => {
          if (err.response.status == 401) {
            this.editType = false
          }
          console.error(err)
        })
    }
  }
}
</script>


<style scoped>
.wrapper {
  min-height: 100%;

  /* 等于footer的高度 */
  margin-bottom: -40px;
}
.footer,
.push {
  height: 40px;
}
</style>
